<template>
	<view style="background-color: white;">
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="尚图" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view class="articlev" style="padding-inline: 20rpx;" v-if="articleDetail">
			<!-- 标题 -->
			<text class="grace-art-margin grace-art-title">{{articleDetail.title}}</text>
			<!-- 作者信息 -->
			<view class="grace-art-margin grace-nowrap grace-flex-vcenter">
				<view class="grace-art-author grace-nowrap grace-flex-vcenter">
					<image class="grace-art-author-face" :src="articleDetail.merchantIcon" mode="widthFix"></image>
					<text class="grace-art-author-name">{{articleDetail.merchantName}}</text>
				</view>
				<text class="grace-art-btn grace-bg-green" @click="focusMerchant">+ 关注</text>
			</view>
			<!-- 其他基本信息 -->
			<view class="grace-art-info-line grace-art-margin grace-space-between">
				<text class="grace-art-info-line-text grace-icons icon-eye" v-if="article.viewNumber">
					{{article.viewNumber}}</text>
				<text class="grace-art-info-line-text">发布于 : {{articleDetail.createTime}}</text>
			</view>
			<!-- 文章内容 -->
			<view class="grace-art-contents">
<!-- 				<block v-for="(item, index) in article.contents" :key="index">
					<view  v-if="item.type == 'img'">
						<image :src="item.content"  mode="widthFix" :data-imgurl="item.content"
							@tap="prevImg"></image>
					</view>
					<view class="grace-art-content grace-indent" v-if="item.type == 'text'">
						{{item.content}}</view>																							
				</block> -->
				<block >
					<view class="grace-art-content grace-indent">
						{{articleDetail.words}}</view>																							
				</block>
				<view class="productv" v-for="(product, index2) in articleDetail.products" :key="index2" @click="chooseProduct(product.id)">
					<view class="product-title">
						<view class="grace-title-border" style="display: block;"></view>
						<text class="grace-title">{{product.productName}}</text>
					</view>
					<view style="border-radius: 20rpx;box-shadow:0px 0px 8rpx #D5D6D8;">
						<view class="image-with-text">
							<image :src="product.imgs[0].url" />
							<!-- <view class="over-text">
								<text style="font-size: 38rpx;">{{product.price}}</text><text style="font-size: 28rpx;">元</text>
							</view> -->
						</view>
						<view style="display: flex;justify-content:left;align-items:center;flex-wrap: wrap;">
							<view style="width: 50%;">
								<view class="grace-text-small grace-black6" style="padding-inline: 10rpx;"><text>产地：</text><text>南华</text></view>
								<view class="grace-text-small grace-black6" style="padding-inline: 10rpx;"><text>生产日期：</text><text>2024年8月5日</text></view>
							</view>
							<view style="flex: 1;text-align: right;padding-right: 25rpx;color: #e67e22;">
								<text style="font-size: 38rpx;">{{product.price}}</text><text style="font-size: 28rpx;">元</text>
							</view>

						</view>
					</view>					
				</view>	
			</view>
		</view>

	</view>
</template>

<script>
	import articleApi from '@/api/article';
	import focusApi from "@/api/focus.js"
	export default {
		data() {
			return {
				graceSkeleton: true,
				article: {
					title: "云南野生菌2",
					authorFace: "https://shangtu.obs.cn-north-4.myhuaweicloud.com/img/xiaoleng.png",
					authorName: "小冷",
					viewNumber: "1.5w",
					date: "2024-10-9",
					contents: [{
							type: "text",
							content: "松茸，学名松口蘑，具有独特的浓郁香味，是世界闻名的名贵天然食用菌，我国二级濒危保护物种，被誉为“菌中之王”。松茸富含独有的抗癌物质——松茸醇，相传1945年8月广岛原子弹袭击后，存活的多细胞微生物只有松茸，目前全世界都不可人工培植"
						},
						// {
						// 	type: "img",
						// 	content: "https://shangtu.obs.cn-north-4.myhuaweicloud.com/product/%E9%87%8E%E7%94%9F%E8%8F%8C.png"
						// },
					],
					products:[{
						productName: '牛肝菌',
						price: 98.00,
						img: 'https://shangtu.obs.cn-north-4.myhuaweicloud.com/product/%E9%87%8E%E7%94%9F%E8%8F%8C.png'
						
					}]
				},
				articleDetail: null
			}
		},
		onShow() {
			this.$wsService.connect(getApp().globalData.userInfo.userId);
		},
		onLoad(options) {
			this.articleId = options.articleId
			articleApi.findById(options.articleId).then(res => {
				console.log(res)
				this.articleDetail = res;
				
			})
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			chooseProduct(id) {
				console.log("productId", id)
				uni.navigateTo({
					url: "/pages/productDetail/productDetail?productId="+id
				})
			},			
			focusMerchant() {
				uni.showLoading({
					title: '关注中',
					icon: 'loading'
				});
				focusApi.add(this.articleDetail.merchantId, 'MERCHANT').then(res => {
					this.isFocus = true
					uni.showToast({
						title: '已关注',
						icon: 'success',
						duration: 1500
					});
				}).catch(error => {
					uni.showToast({
						title: '关注失败',
						icon: 'fail',
						duration: 1500
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	
	.productv {
		margin-bottom: 30rpx;
	
		.product-title {
			margin-top: 20rpx;
			color: #454545;
			display: flex;
			justify-content:left;
			align-items:center;
			flex-wrap: wrap;
		}
		
		.image-with-text {			
			padding: 5rpx;
			position: relative;
			border-radius: 10rpx;
			
		
			image {
				width: calc(100vw - 50rpx);
				height: calc(50vw - 10rpx);
				vertical-align: middle; //去除图片下面的缝隙
				border-radius: 10rpx;

			}
		
			.over-text {
				height: 50rpx;
				width: auto;
				position: absolute;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: flex-end; // 文字底部对齐
				flex-wrap: wrap;
				bottom: 8rpx;
				right: 0;
				color: #e67e22;
				font-weight: bold;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 8rpx;
		
				text {
					margin-inline: 5rpx;
				}
			}
		}
	}
	
	
	


	.grace-art-margin {
		margin-top: 20rpx;
	}

	.grace-art-title {
		display: block;
		width: 100%;
		font-size: 38rpx;
		font-weight: bold;
		line-height: 56rpx;
	}

	.grace-skeletons {
		background-color: #F8F8F8;
		border-radius: 8rpx;
		height: 60rpx;
	}

	.grace-skeletons-img {
		width: 100%;
		background-color: #F8F8F8;
		height: 300rpx;
		border-radius: 8rpx;
	}

	.grace-art-author {
		width: 700rpx;
		font-size: 0;
	}

	.grace-art-author-face {
		width: 66rpx;
		height: 66rpx;
		border-radius: 66rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.grace-art-author-name {
		display: block;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	.grace-art-btn {
		width: 120rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 26rpx;
		display: block;
		flex-shrink: 0;
		margin-left: 30rpx;
	}

	.grace-art-info-line {}

	.grace-art-info-line-text {
		font-size: 22rpx;
		line-height: 50rpx;
		color: #888888;
	}

	.grace-art-contents {
		padding: 20rpx 0;
	}

	.grace-art-img {
		width: 100%;
		margin: 10rpx 0;
	}

	.grace-art-content {
		line-height: 52rpx;
		font-size: 28rpx;
	}
</style>